<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="text" v-model="bookName">
    <p v-book="bookName"></p>
</div>
</body>
<script>
	new Vue({
		el: "#root",
        data:{
			bookName:"斗破苍穹"
        },
        directives:{
			// book(el,binds){
			// 	el.innerText = "《"+binds.value+"》";
            // }

            book:{
				// bind是一个钩子函数，只会挂载一次，当数据发生变化，视图会更新，但不会对指令重新解析。
				bind(el,binds){
					el.innerText = "《"+binds.value+"》";
                }
            }
        }
	})
</script>
</html>